<template>
  <div class="tab">
  <ul class="tab_container">
      <li v-for="(item, index) in acgtiveName" :key="item+index"
      :class="{active1: index === activeIndex}"
      @click="toggleChange(index)">
        {{item}}
      </li>
    </ul>
    <keep-alive>
      <component :is="activeComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
import one from './one.vue'
import two from './two.vue'
import there from './there.vue'
export default {
  data () {
    return {
      activeComponent: 'one',
      acgtiveName: ['one', 'two', 'there'],
      activeIndex: 0
    }
  },
  components: {
    one,
    two,
    there
  },
  methods: {
    toggleChange(index) {
      this.activeIndex = index
      this.activeComponent = this.acgtiveName[index]
    }
  },
  provide: {
    name: 'SKY',
    age: 19
  }
}
</script>

<style scoped>
.tab {
  width: 100%;
  height: 50px;
  /* background-color: red; */
}
.tab_container {
  width: 100%;
  height: 100%;
  display: flex;

}
.tab_container li {
  flex: 1;
  list-style: none;
  background-color: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tab_container li.active1 {
  background-color: red;
}
</style>